<template>
    <div class="tab-bar-item"  @click="itemClick">
      <div v-if="!isActive">
        <slot name="item-icon"></slot>
      </div>
      <div v-else>
        <slot name="item-icon-active"></slot>
      </div>
      <div :style="activeStyle">
        <slot name="item-text"></slot>
      </div>
    </div>
</template>

<script>
    export default {
        name: "TabBarItem",
        props:{
          path:String,
          activeColor:{
            type:String,
            default:'red'
          }
        },
        data() {
          return {
          }
        },
        computed:{
          isActive() {
            return this.$route.path.indexOf(this.path) !== -1;
          },
          activeStyle() {
            return this.isActive ? {color:this.activeColor} :{};
          }
        },
        methods: {
          itemClick() {
            // console.log('abc');
            this.$router.push(this.path);
          }
        }
    }
</script>

<style scoped>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    /*padding-top: 5px;*/
  }
  .tab-bar-item img {
    width: 20px;
    height: 20px;
    margin-top: 5px;
  }
  .tab-bar-item div {
    font-size: 12px;
  }
</style>
